/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-07 13:15:40
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-12 13:44:32
 * @FilePath: /operator-manager/src/pages/AccountAccessManage/components/AccountCreate/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { accountCreate, getAllRoles } from '@/services';
import { accountType } from '@/utils/globalConstants';
import { passwordReg, phoneReg } from '@/utils/validate';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { AccountCreateForm, AccountTableEnum } from '../../type.d';
interface IAccountCreateProps {
  successCallback?: () => void;
}
const AccountCreate: React.FC<IAccountCreateProps> = (props) => {
  const [form] = Form.useForm<AccountCreateForm>();
  const { successCallback } = props;
  return (
    <ModalForm<AccountCreateForm>
      title="添加账号"
      width={600}
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 19 }}
      layout="horizontal"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          添加账号
        </Button>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        centered: true,
        styles: {
          body: {
            minHeight: '300px',
            maxHeight: '80vh',
            overflowY: 'auto',
          },
        },
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log('创建账号提交的数据', values);
        const res = await accountCreate({ data: values, type: accountType });
        if (res?.success) {
          message.success('保存成功！');
          if (successCallback) {
            successCallback();
          }
          return true;
        }
        return false;
      }}
    >
      <ProFormText
        width="md"
        name={AccountTableEnum.NAME}
        label="姓名"
        placeholder="请输入名称"
        rules={[{ required: true, message: '请输入账号名称' }]}
        fieldProps={{
          autoComplete: 'new-username',
        }}
      />
      <ProFormText
        width="md"
        name={AccountTableEnum.PHONE}
        label="手机号"
        placeholder="请输入手机号"
        rules={[
          { required: true, message: '请输入手机号' },
          { pattern: phoneReg, message: '请输入正确的手机号' },
        ]}
      />
      <ProFormText.Password
        width="md"
        name={AccountTableEnum.PW}
        label="密码"
        placeholder="请输入密码"
        rules={[
          { required: true, message: '请输入密码' },
          {
            pattern: passwordReg,
            message: '请输入至少包含数字和字母的6-18位密码',
          },
        ]}
        fieldProps={{
          autoComplete: 'new-password',
        }}
      />
      <ProFormSelect
        request={async () => {
          const rolesList = await getAllRoles();
          return rolesList;
        }}
        width="xs"
        name={AccountTableEnum.ROLE_ID}
        label="角色"
        rules={[{ required: true, message: '请选择账号关联角色' }]}
        fieldProps={{
          fieldNames: { value: 'id', label: 'name' },
          width: '328px',
          style: { width: '328px' },
        }}
      />
    </ModalForm>
  );
};

export default AccountCreate;
